import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import Controls from '#cpt/temp/Controls'
import Confirm from '#cpt/temp/Confirm'
// ===================================================================== global declare
const { $fn, $Lazy, $http } = window
// ===================================================================== Lazy
const Input 	= $Lazy.load(()=>import('@antd/form/input'))
const Box 		= $Lazy.load(()=>import('#tp/box/box'))
const AddModal 	= $Lazy.state(()=>import('./cpt/add-modal'))
const message 	= $Lazy.file(()=>import('@antd/message'))
// ===================================================================== data
// 从属项目项目状态
const stadusData = [
	{ name:'禁用', value:'1'},
	{ name:'开启', value:'2'}
]
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
	}
	
	model = {}
	
	componentDidMount(){
		this.query = { kind_id: this.props.kind_id }
		this.fetch()
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'kind-rel-kind/index')
	
	// 表单
	cols = [
		// 增加回车事件 2021-7-16 9:57:51 ?F10: AM? --伍智睿
		{ title: '排序',			dataIndex: 'sort', 				width:150, 
			render: (text, rows, index) =>
				<Input
					value={text} 
					onChange={value=> rows['sort'] = value} 
					onEnter={(value) => {
						$http.submit(null, 'kind-rel-kind/updatesort', { param:{ sort: value, uuid: rows.uuid } }).then(data=>{
							message.then(f=>f.success('操作成功'))
							this.fetch()
						})
					}}
					autoFocus={ index === 0 ? true : false }
				/>,
		},
		{ title: '从属项目代码', 	dataIndex: 'kind_code', 		width:150 },
		{ title: '从属项目名称', 	dataIndex: 'kind_name', 		width:250},
		{ title: '从属项目简称', 	dataIndex: 'short_name', 		width:200 },
		{ title: '从属项目英文', 	dataIndex: 'name_en', 			width:200 },
		{ title: '从属项目检测方法', dataIndex: 'check_method', 		width:200 },
		{ title: '状态', 			dataIndex: 'kind_status', 		width:60, render: text => $fn.getState(stadusData, text) },
	]
	// 操作按钮
	controls = () => {
		const { disabled } = this.props
		return [
			Controls.click.call(this,'添加', ()=> this.modalRef.open(this.props.kind_id), { disabled } ),
			Confirm.call(this,'删除', 'kind-rel-kind/delete', { isKeys: true, ghost:true })
		]
	}
	render(){
		return (
			<>
				<Box title='从属项目' controls={this.controls()} className='mt5' contentClassName='pt10'>
					{/* 表格 */}
					{ Table.call(this, { wrapStyle: this.props.tableStyle, disabled:this.props.disabled }) }
				</Box>
				{/* 弹窗 */}
				<AddModal onRef={ref => this.modalRef = ref} onRefresh={this.fetch} />
			</>
		)
	}
}

export default Index